// 定义一个轮播图类
class Carousel {
    constructor(tag) {
        // 获取目标元素
        this.tag = document.querySelector(tag);
        // 获取左右点击按钮
        this.lBtn = this.tag.querySelector(".l_btn");
        this.rBtn = this.tag.querySelector(".r_btn");
        // 获取li列表
        this.list = document.querySelectorAll(".img_box>ul>li");
        // 获取小圆点
        this.dots = this.tag.querySelectorAll(".dot_box>span");
        this.dotBox = this.tag.querySelector(".dot_box");

        // 获取所有li要移动的类名
        // this.listClassName = this.tag.querySelectorAll(".img_box>ul>li");
        this.listClassName = ["list01", "list02", "list03", "list04"];
        this.dotClassName = ["dot01", "dot02", "dot03", "dot04"];
        // 触发绑定事件
        this.eventFn();
        // 初始化变量
        this.index = 0;
        // 获取上一个初始化变量值
        this.lastIndex = 0;
        // console.log(this.listClassName);
        // 点击小圆点事件
        this.dotsFn();
        this.timeFn();
    };
    // li全部重新设置类名
    restListFn() {
        this.list.forEach((item, idx) => {
                // console.log(item.classList);
                item.className = this.listClassName[idx];
            })
            // console.log(this.index, this.lastIndex);

        // this.list[this.lastIndex].classList.remove(this.list[this.lastIndex].classList[0]);
        // console.log(this.listClassName[this.index]);

        // this.list[this.lastIndex].classList.remove();
        // this.list[this.index].classList.add();
        // console.log(this.list[this.lastIndex]);

    };
    // 点击右按钮
    eventFn() {
        this.rBtn.addEventListener("click", () => {

            // 操作数组
            this.listClassName.push(this.listClassName[0]);
            // console.log(this.listClassName);
            // 删除数组的第一个值
            this.listClassName.shift();
            // console.log(this.listClassName);


            // console.log(this);
            // index操作完成之后重新赋值
            this.lastIndex = this.index;

            this.index++;
            // index最大值
            if (this.index == this.listClassName.length) {
                this.index = 0;
            };
            // console.log(this.lastIndex, this.index);
            // 去除当前li类名
            this.list[this.lastIndex].classList.remove(this.listClassName[this.list.lastIndex]);
            // 添加新类名
            this.list[this.index].classList.add(this.listClassName[this.list.index]);
            // li全部重新设置类名
            this.restListFn();

        });
        // 点击左按钮
        this.lBtn.addEventListener("click", () => {
            // 操作数组
            this.listClassName.unshift(this.listClassName[3]);
            this.listClassName.pop(this.listClassName[0]);
            // li全部重新设置类名
            this.restListFn();

        })
    }

    dotsFn() {
        this.dots.forEach((item, idx) => {
            // console.log(item);
            item.addEventListener("click", () => {
                // 小圆点切换类名

                // console.log(this.lastIndex, this.index);

                // 操作数组
                this.listClassName.unshift(this.listClassName[3]);
                this.listClassName.pop();
                // li全部重新设置类名
                this.restListFn();

            })

        })
    };
    // 自动轮播
    timeFn() {
        if (this.timer) {
            clearInterval(this.timer);
        }
        this.timer = setInterval(() => {
            this.listClassName.push(this.listClassName[0]);
            this.listClassName.shift();
            this.restListFn()
        }, 2000);
    };
}